<template>
  <div>
    <div class="tabBox">
      <router-link to="/" class="tabItem">
        <img v-if="pathName!=='/'" src="../assets/images/157105696599538235.png" alt />
        <img v-if="pathName=='/'" src="../assets/images/157543975265772267.png" alt />
        <div class="tabTitle" :class="pathName=='/'?'active':''">首页</div>
      </router-link>
      <router-link to="/classify" class="tabItem">
        <img src="../assets/images/157105701015391606.png" alt />
        <div class="tabTitle" :class="pathName=='/classify'?'active':''">分类</div>
      </router-link>
        <router-link to="/inventory" class="tabItem">
        <img v-if="pathName!=='/inventory'" src="../assets/images/157105715014136982.png" alt />
        <img v-if="pathName=='/inventory'" src="../assets/images/157105715273415124.png" alt />
        <div class="tabTitle" :class="pathName=='/inventory'?'active':''">必抢清单</div>
      </router-link>
        <router-link to="/cart" class="tabItem">
        <img v-if="pathName!=='/cart'" src="../assets/images/157543979328589256.png" alt />
        <img v-if="pathName=='/cart'" src="../assets/images/157105763151658248.png" alt />
        <div class="tabTitle" :class="pathName=='/cart'?'active':''">购物车</div>
      </router-link>
      <router-link to="/mine" class="tabItem">
        <img v-if="pathName!=='/mine'" src="../assets/images/157105768303272975.png" alt />
        <img v-if="pathName=='/mine'" src="../assets/images/157105768594001788.png" alt />
        <div class="tabTitle" :class="pathName=='/mine'?'active':''">我的</div>
      </router-link>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      pathName: ''
    }
  },
  created() {
    this.pathName = this.$route.fullPath

  }
}
</script>
<style lang="less" scoped>
.tabBox {
  display: flex;
  align-items: center;
  z-index: 3;
  border-top: 1px solid #e4e4e4;
  padding-top: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  font-size: 24px;
  .tabItem {
    flex: 1;
    text-align: center;
    img {
      width: 50px;
    }
    .tabTitle {
      color: #353535;
      margin-top: -8px;
    }
    .tabTitle.active {
      color: #000;
      font-weight: bold;
    }
  }
}
</style>